<template>
	<!-- 详细信息 -->
	<view class="full bg-white">
		<action-bar backTitle="返回" title="账单详情"></action-bar>
			<view>
				<view class="padding-sm text-left bg-white">
					<view class="padding-sm solid-bottom">金额</view>
					<view v-if="canshow" :class="record.recordType == 1 ? 'text-red': 'text-green'" 
						   class="padding-sm text-price text-lg" 
						   v-text="record.recordAmount"></view>
					<view v-else class="padding-sm text-price text-lg" >*</view>
				</view>
				<view class="padding-sm text-left bg-white">
					<view class="padding-sm solid-bottom">创建人</view>
					<view class="padding-sm text-lg" v-text="canshow ? record.nickname : '***'"></view>
				</view>
				<view class="padding-sm text-left bg-white">
					<view class="padding-sm solid-bottom">创建时间</view>
					<view class="padding-sm text-lg" v-text="canshow ? dateFormat(record.updateDate) : '****/**/**'"></view>
				</view>
				<view class="padding-sm text-left bg-white">
					<view class="padding-sm solid-bottom">分类</view>
					<view v-if="canshow" class="margin-sm cu-tag" 
						  :class="record.recordType == 1 ? 'bg-red': 'bg-green'" 
						  v-text="record.recordType == 1 ? '支出': '收入'" />
						  
					<view class="margin-sm cu-tag bg-cyan" v-text="record.styleName"></view>
					<view v-if="record.secretStatus === '1'" class="margin-sm cu-tag bg-blue" v-text="'私密'"></view>
				</view>
				<view class="padding-sm text-left bg-white">
					<view class="padding-sm solid-bottom">备注</view>
					<view class="padding-sm" v-text="record.recordComment"></view>
				</view>
			</view>
			<view class="flex justify-center margin-top-xl">
				<button @click="changeSecret()" v-text="record.secretStatus === '1' ? '取消私密': '设置为私密'" class="cu-btn" :class="record.secretStatus === '1' ? 'bg-blue': ''" />
				<button @click="remove()" class="cu-btn bg-red margin-left-xl">删除</button>
				<button @click="update()" class="cu-btn bg-blue margin-left-xl">修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {dateFormat} from '../../common/dateUtils.js'
	import {hasPermisson, isAdmin} from '../../common/permission.js'
	export default {
		onLoad(option) {
			this.bookId = option.bookId
			this.recordId = option.recordId
			this.userId = option.userId
			
			this.queryByRecordId()  // 查询信息
		},
		data() {
			return {
				bookId: null,   // 账本ID
				recordId: null,	// 账单ID
				userId: null,	// 账单创建者ID
				record: {},
				canshow: false,
			}
		},
		methods: {
			dateFormat,hasPermisson,isAdmin,
			
			update() {
				if (this.hasPermisson('')) {
					let url = `./record?recordId=${this.recordId}&op=update`
					uni.navigateTo({url: url})
				} else {
					this.$message.error('没有权限')
				}
			},
			
			remove() {
				if (this.hasPermisson('')) {
					uni.showModal({
						title: '确定要删除吗?',
						success: res => {
							if (res.confirm) {
								this.$request({
									url: `/record/${this.recordId}`,
									method: 'DELETE'
								}).then(res => {
									if (res && res.data.code == 200) {
										this.$message.success('删除成功！')
										uni.navigateBack()
									}
								})
							}
						}
					})
				} else {
					this.$message.error('没有权限')
				}
			},
			
			/**
			 * 根据ID查询信息记录
			 */
			queryByRecordId() {
				this.$request({
					url: `/record/${this.recordId}`
				}).then(res => {
					if (res && res.data.code == 200) {
						this.record = res.data.record
						this.canshow = this.userId == this.$store.getters.id || this.isAdmin() || res.data.record.secretStatus == '0'
					}
				})
			},
			
			/**
			 * 修改隐私状态
			 * @param {Object} id
			 * @param {Object} status
			 */
			changeSecret() {
				if (this.isAdmin() || this.userId == this.$store.getters.id) {
					this.$request({
						url: `/record/${this.record.id}/secret/${this.record.secretStatus === '0'}`,
						method: 'put'
					}).then(res => {
						if (res) {
							this.queryByRecordId()
							this.$message.success('操作成功')
						} else {
							this.$message.error('操作失败')
						}
					})
				} else {
					this.$message.error('没有操作权限')
				}
			},
		}
	}
</script>

<style>
	.text-ultra {
		font-size: 100rpx;
	}
	
	.text-item {
		/* margin-right: 200rpx; */
	}
	
	.text-title {
		/* padding: 0 0 0 50rpx */
	}
</style>
